<template>
  <div>
    <div @click="mask=true">
      <slot name="delete"></slot>
    </div>

    <!-- 幕布 -->
    <el-main class="mask" v-show="mask">
      <!-- 弹窗内容 -->
      <div class="mask-background">

        <!-- 弹窗信息 -->
        <div class="mask-top">
          <slot name="mask-top"></slot>
        </div>

        <!-- 弹窗中间内容 -->
        <div class="mask-middle">
          <slot name="mask-middle"></slot>
          <!-- <input class="middle-input" type="text" placeholder="请输入内容" v-model="inputText"> -->
        </div>

        <!-- 底部功能 -->
        <div class="mask-bottom">
          <!-- 左侧渲染 -->
          <button class="bottom-left" @click="mask=false">
            <slot name="bottom-left"></slot>
          </button>
          <!-- 右侧渲染 -->
          <button class="bottom-right" @click="mask=false">
            <slot name="bottom-right"></slot>
          </button>
        </div>

      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mask:false,
      inputText: '',
    }    
  },
  methods: {
    submit() {
      this.mask = !this.mask 
      console.log("傻瓜蛋子", this.inputText)
    },
  }
}
</script>

<style>
/* 幕布 */
/* .mask {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: rgba(56, 55, 55, 0.651);
} */

/* 弹窗内容 */
.mask-background {  
  width: 400px;
  height: 200px;
  display: flex;
  border-radius: 10px;
  background: #fff;
  flex-direction: column;
  border: 2px solid rgba(56, 55, 55, 0.3);
}

/* 弹窗信息 */
.mask-top {
  top: 0px;
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(56, 55, 55, 0.1);
}

/* 弹窗中间内容 */
.mask-middle {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 80px;
  align-items: center;
  justify-content: center;
  margin: 5px 0px 10px 0px;
}

/* 输入功能 */
.middle-input {
  width: 340px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid rgba(56, 55, 55, 0.5);
}

/* 底部功能 */
.mask-bottom {
  display: flex;
  margin-bottom: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* 左边渲染 */
.bottom-left {
  width: 120px;
  height: 50px;
  display: flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  
  border: 0px;
  color: #ffffff;
  background: #7c0000;
}

/* 右边渲染 */
.bottom-right {
  width: 120px;
  height: 50px;
  display: flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;

  color: #000000;
  margin-left: 60px;
  background: #ffffff;
  border: 1px solid rgba(56, 55, 55, 0.3);
}

</style>